<template>
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
        <el-breadcrumb separator="/" class="breadcrumb-nav">
            <el-breadcrumb-item>
                <router-link to="/OnePages" class="breadcrumb-link">首页</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <span class="breadcrumb-text">权限管理</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <span class="breadcrumb-current">角色设置</span>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 页面标题和描述 -->
        <div class="page-header">
            <h1 class="page-title">角色管理</h1>
            <p class="page-description">记录系统角色信息</p>
        </div>

        <!-- 分隔线 -->
        <div class="divider"></div>
    </div>
    <el-card style="margin: 10px auto;width: 1300px;">
        <el-form :inline="true" :model="checks" class="demo-form-inline">
            <el-form-item class="flex-form-container">
                <el-form-item>
                    <el-input v-model="checks.roleName" placeholder="请输入角色名称"
                        style="width: 200px; margin-right: 10px;" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="default" @click="getuser" :icon="Search"
                        class="btn-primary">查询</el-button>
                    <el-button size="default" @click="checknull" :icon="RefreshRight" class="btn-reset">重置</el-button>
                    <el-button type="success" size="default" @click="add" :icon="Check"
                        class="btn-success">新增角色</el-button>
                </el-form-item>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card style="margin: 10px auto;width: 1300px;">
        <el-dialog v-model="dialogVisible" :title="title" width="500" class="role-dialog" :close-on-click-modal="false"
            :modal="true" :modal-class="'dialog-modal'" :append-to-body="true" :destroy-on-close="false" :center="false"
            :align-center="true" :z-index="3000">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="ruleForm.roleName" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="角色备注" prop="roleMessage">
                    <el-input v-model="ruleForm.roleMessage" style="width: 240px" :rows="2" type="textarea"
                        placeholder="请输入角色备注" />
                </el-form-item>
                <el-form-item label="选择权限:" prop="rPId">
                    <el-checkbox-group v-model="ruleForm.permissionId">
                        <el-checkbox v-for="item in listper" :value="item.permissionId" :label="item.permissionName"
                            name="type">
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

            </el-form>
            <el-form-item>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </div>
            </el-form-item>
        </el-dialog>

        <el-table :data="rolelist" border style="width: 100%;height: 500px;">
            <el-table-column type="index" label="序号" align="center" />
            <el-table-column prop="roleName" label="角色名称" align="center" />
            <el-table-column prop="roleMessage" label="角色备注" align="center" />
            <el-table-column prop="permissionName" label="权限" align="center" />
            <!-- <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-link type="danger" class="custom-link" @click="deleteRole(scope.row.roleId)"
                        size="large">删除</el-link>&nbsp;&nbsp;
                    <el-link type="warning" class="custom-link" @click="updateRole(scope.row)" size="large">编辑</el-link>
                </template>
</el-table-column> -->

            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-button type="danger" plain @click="deleteRole(scope.row.roleId)" :icon="Delete"
                        class="btn-table-action" size="small">删除</el-button>
                    <el-button type="primary" plain @click="updateRole(scope.row)" :icon="Delete"
                        class="btn-table-action" size="small">编辑</el-button>

                </template>
            </el-table-column>
        </el-table>
        <table style="margin: 20px auto;">
            <tbody>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="rolepage.PageIndex" v-model:page-size="rolepage.PageSize"
                            :page-sizes="[3, 6, 7, 10, 20]" :background="true"
                            layout="total, sizes, prev, pager, next, jumper,slot" :total="rolepage.totalCount">
                            <button @click="rolepage.PageIndex = 1" :disabled="rolepage.PageIndex == 1">首页</button>
                            <button @click="rolepage.PageIndex = rolepage.totalPage"
                                :disabled="rolepage.PageIndex == rolepage.totalPage">尾页</button>
                        </el-pagination>
                    </td>
                </tr>
            </tbody>
        </table>
    </el-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { Reads, Writes } from '@/Utils/axiosHelper'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
import {
    Plus,
    Check,
    RefreshRight,
    Search,
    Delete,
} from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const title = ref("")

onMounted(() => {
    getuser();
    getper()
    getrole()
})

//列表
const lists = ref<any>([])
const getrole = () => {
    Reads.get("/Management/GetRole", {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
        }
    }).then(res => {
        lists.value = res.data.data.data
        page.totalCount = res.data.data.totalCount
        page.totalPage = res.data.data.totalPage
    })
}

const updateRole = (row: any) => {
    dialogVisible.value = true
    title.value = "编辑角色"

    ruleForm.roleId = row.roleId
    ruleForm.roleName = row.roleName
    ruleForm.roleMessage = row.roleMessage
    ruleForm.permissionId = row.permissionId
    // ruleForm.rpId = row.rpId
    ruleForm.createTime = row.createTime
    console.log(row)
}

const add = () => {
    dialogVisible.value = true
    title.value = "新增角色"
    ruleForm.roleName = ""
    ruleForm.roleMessage = ""
    ruleForm.permissionId = []
    ruleForm.createUserNo = counter.user.userNickName
}

//分页
const rolepage = reactive({
    PageIndex: 1,
    PageSize: 6,
    totalCount: 0,
    totalPage: 0
})
const checks = reactive({
    roleName: "",
})
const checknull = () => {
    checks.roleName = ""
    getuser()
}
const rolelist = ref([])
const getuser = () => {
    Reads.get("/Management/GetRole", {
        params: {
            PageIndex: rolepage.PageIndex,
            PageSize: rolepage.PageSize,
            roleName: checks.roleName,
        }
    }).then(res => {
        rolelist.value = res.data.data.data
        rolepage.totalCount = res.data.data.totalCount
        rolepage.totalPage = res.data.data.totalPage
    })
}

//分页
const page = reactive({
    PageIndex: 1,
    PageSize: 6,
    totalCount: 0,
    totalPage: 0
})

//权限
const listper = ref<any>([])
const getper = () => {
    Reads.get("/Management/GetPermission", {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
        }
    }).then(res => {
        listper.value = res.data.data.data
        page.totalCount = res.data.data.totalCount
        page.totalPage = res.data.data.totalPage
    })
}



interface RuleForm {
    "roleId": number,
    "roleName": string,
    "roleMessage": string,
    // "rpId": number[],
    "permissionId": number[]
    "createUserNo": string
    "createTime": string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    "roleId": 0,
    "roleName": "",
    "roleMessage": "",
    "permissionId": [],
    // "rpId": [],
    "createUserNo": counter.user.userNickName,
    "createTime": ""
})


const rules = reactive<FormRules<RuleForm>>({
    roleName: [
        { required: true, message: '请输入角色名称！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    roleMessage: [
        { required: true, message: '请输入角色备注！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    permissionId: [
        { required: true, message: '请输入角色权限！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleForm.roleId == 0) {
                Writes.post("/Management/AddRole", ruleForm).then(res => {
                    if (res.data.code == 100) {
                        ElMessage.success(res.data.message)
                        dialogVisible.value = false
                        getuser()
                    }
                    else {
                        ElMessage.error(res.data.message)
                    }
                })
            }
            else {
                Writes.post("/Management/UpdateRole", ruleForm).then(res => {
                    if (res.data.code == 300) {
                        ElMessage.success(res.data.message)
                        dialogVisible.value = false
                        getuser()
                    }
                    else {
                        ElMessage.error(res.data.message)
                    }
                })
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogVisible.value = false
    getrole()
}

// 删除角色方法
const deleteRole = (roleId: any) => {
    ElMessageBox.confirm(
        `确定要删除该角色吗？此操作不可恢复！`,
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 执行删除操作
            Writes.post("/Management/DeleteRole?RoleId=" + roleId).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success(res.data.message)
                    getuser()
                } else {
                    ElMessage.error(res.data.message)
                }
            }).catch(err => {
                ElMessage.error('删除失败')
            })
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

watch(rolepage, () => {
    getuser()
})
</script>

<style scoped>
.btn-primary,
.btn-success,
.btn-reset,
.btn-delete {
    transition: all 0.3s ease;
}

/* 面包屑导航样式 */
.breadcrumb-container {
    margin: 20px auto;
    width: 1300px;
}

.breadcrumb-nav {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    margin-bottom: 20px;
}

.breadcrumb-link {
    color: #606266;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: #409EFF;
}

.breadcrumb-text {
    color: #606266;
    font-size: 14px;
}

.breadcrumb-current {
    color: #303133;
    font-size: 14px;
    font-weight: 500;
}

/* 页面标题样式 */
.page-header {
    margin-bottom: 20px;
}

.page-title {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.page-description {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    font-size: 14px;
    color: #909399;
    margin: 0;
    line-height: 1.4;
}

/* 分隔线样式 */
.divider {
    height: 2px;
    background: linear-gradient(90deg, #9281ce 0%, #828fd5 50%, #08a8cc 100%);

    border-radius: 1px;
}

/* 自定义按钮样式 */
.custom-button {
    background-color: #f56c6c;
    border-color: #f56c6c;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-right: 8px;
}

.custom-button:hover {
    background-color: #e64340;
    border-color: #e64340;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.custom-button:active {
    transform: translateY(0);
}

/* 自定义链接样式 */
.custom-link {
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.custom-link:hover {
    opacity: 0.8;
}

/* 自定义分页按钮样式 */
.custom-pagination-btn {
    background-color: #f56c6c;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.custom-pagination-btn:hover:not(:disabled) {
    background-color: #e64340;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.custom-pagination-btn:disabled {
    background-color: #dcdfe6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 确保按钮在不同状态下保持美观 */
.el-button--danger {
    border-radius: 6px;
}

/* 新增用户弹框样式 */
.role-dialog {
    border-radius: 12px;
    overflow: hidden;
    animation: dialogSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
}

/* 弹框进入动画 - 弹性效果 */
@keyframes dialogSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-100px) rotate(-10deg);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1) translateY(-20px) rotate(2deg);
    }

    70% {
        opacity: 0.9;
        transform: scale(0.95) translateY(5px) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
    }
}

/* 弹框退出动画 */
.role-dialog.dialog-leave-active {
    animation: dialogSlideOut 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

@keyframes dialogSlideOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8) translateY(-20px) rotate(180deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.3) translateY(-50px) rotate(360deg);
    }
}

/* 弹框背景遮罩动画 */
.dialog-modal {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
        background: rgba(0, 0, 0, 0);
    }

    50% {
        opacity: 0.7;
        backdrop-filter: blur(2px);
        background: rgba(0, 0, 0, 0.3);
    }

    100% {
        opacity: 1;
        backdrop-filter: blur(4px);
        background: rgba(0, 0, 0, 0.5);
    }
}

/* 弹框背景遮罩退出动画 */
.dialog-modal.dialog-leave-active {
    animation: modalFadeOut 0.2s ease-in;
}

@keyframes modalFadeOut {
    0% {
        opacity: 1;
        backdrop-filter: blur(4px);
    }

    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

.role-dialog .el-dialog__header {
    background: linear-gradient(135deg, #ff6b6b 0%, #f56c6c 100%);
    color: white;
    /* padding: 20px 24px; */
    margin: 0;
    animation: headerSlideIn 0.6s ease-out 0.2s both;
    position: relative;
    overflow: hidden;
}

.role-dialog .el-dialog__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 2s infinite;
}

@keyframes headerSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.role-dialog .el-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.role-dialog .el-dialog__body {
    padding: 24px;
    background-color: #fafafa;
    animation: bodySlideIn 0.5s ease-out 0.3s both;
    position: relative;
}

@keyframes bodySlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.role-form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.role-input,
.role-textarea {
    border-radius: 6px;
    transition: all 0.3s ease;
}

.role-input:hover,
.role-textarea:hover {
    border-color: #f56c6c;
}

.role-input:focus,
.role-textarea:focus {
    border-color: #f56c6c;
    box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
}

.role-textarea {
    min-height: 80px !important;
}

.permission-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
}

.permission-checkbox {
    margin-right: 0;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.permission-checkbox:hover {
    background-color: rgba(245, 108, 108, 0.1);
}

.permission-checkbox .el-checkbox__label {
    font-size: 14px;
    color: #606266;
}

.permission-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #f56c6c;
    font-weight: 500;
}

.dialog-footer {
    text-align: center;
    margin: 20px auto;
    padding: 20px 0;
    border-top: 1px solid #e4e7ed;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.dialog-footer .el-button {
    margin: 0 8px;
    min-width: 80px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 按钮波纹效果 */
.dialog-footer .el-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.dialog-footer .el-button:active::before {
    width: 300px;
    height: 300px;
}

/* 按钮悬停效果 - 脉冲效果 */
.dialog-footer .el-button:hover {
    animation: buttonPulse 0.6s ease-in-out infinite alternate;
    box-shadow: 0 8px 25px rgba(64, 158, 255, 0.4);
}

@keyframes buttonPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
    }

    100% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(64, 158, 255, 0.6);
    }
}

.dialog-footer .el-button:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
}

/* 表单项目动画 */
.role-form .el-form-item {
    margin-bottom: 20px;
    animation: fadeInUp 0.4s ease-out;
}

.role-form .el-form-item:nth-child(1) {
    animation-delay: 0.1s;
}

.role-form .el-form-item:nth-child(2) {
    animation-delay: 0.2s;
}

.role-form .el-form-item:nth-child(3) {
    animation-delay: 0.3s;
}

.role-form .el-form-item:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 调整按钮间距 */
.el-form-item {
    display: flex;
    align-items: center;
}

/* 表单容器样式 */
.flex-form-container {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 表单项目动画 */
.role-dialog .el-form-item {
    margin-bottom: 20px;
    animation: fadeInUp 0.5s ease-out;
    animation-fill-mode: both;
}

.role-dialog .el-form-item:nth-child(1) {
    animation-delay: 0.1s;
}

.role-dialog .el-form-item:nth-child(2) {
    animation-delay: 0.15s;
}

.role-dialog .el-form-item:nth-child(3) {
    animation-delay: 0.2s;
}

.role-dialog .el-form-item:nth-child(4) {
    animation-delay: 0.25s;
}

.role-dialog .el-form-item:nth-child(5) {
    animation-delay: 0.3s;
}

.role-dialog .el-form-item:nth-child(6) {
    animation-delay: 0.35s;
}

.role-dialog .el-form-item:nth-child(7) {
    animation-delay: 0.4s;
}

.role-dialog .el-form-item:nth-child(8) {
    animation-delay: 0.45s;
}

.role-dialog .el-form-item:nth-child(9) {
    animation-delay: 0.5s;
}

.role-dialog .el-form-item:nth-child(10) {
    animation-delay: 0.55s;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.8);
        filter: blur(5px);
    }

    50% {
        opacity: 0.6;
        transform: translateX(-10px) scale(0.9);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0px);
    }
}

/* 输入框聚焦动画 - 呼吸效果 */
.role-dialog .el-input__wrapper {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: inputBreathe 2s ease-in-out infinite;
}

.role-dialog .el-input__wrapper:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 108, 108, 0.15);
    animation-play-state: paused;
}

.role-dialog .el-input__wrapper.is-focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 108, 108, 0.25);
    animation: inputFocus 0.5s ease-out;
}

@keyframes inputBreathe {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(245, 108, 108, 0.1);
    }

    50% {
        box-shadow: 0 0 8px rgba(245, 108, 108, 0.2);
    }
}

@keyframes inputFocus {
    0% {
        transform: translateY(-2px) scale(1);
    }

    50% {
        transform: translateY(-3px) scale(1.02);
    }

    100% {
        transform: translateY(-2px) scale(1);
    }
}

/* 选择框动画 */
.role-dialog .el-select {
    transition: all 0.3s ease;
}

.role-dialog .el-select:hover {
    transform: translateY(-1px);
}

/* 单选按钮组动画 */
.role-dialog .el-radio-group {
    transition: all 0.3s ease;
}

.role-dialog .el-radio-group:hover {
    transform: translateY(-1px);
}

/* 复选框组动画 */
.role-dialog .el-checkbox-group {
    transition: all 0.3s ease;
}

.role-dialog .el-checkbox-group:hover {
    transform: translateY(-1px);
}

/* 按钮动画效果 */
.role-dialog .el-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 按钮波纹效果 */
.role-dialog .el-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.role-dialog .el-button:active::before {
    width: 300px;
    height: 300px;
}

/* 按钮悬停效果 - 脉冲效果 */
.role-dialog .el-button:hover {
    animation: buttonPulse 0.6s ease-in-out infinite alternate;
    box-shadow: 0 8px 25px rgba(64, 158, 255, 0.4);
}

@keyframes buttonPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
    }

    100% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(64, 158, 255, 0.6);
    }
}

/* 弹框整体微动画效果 - 浮动效果 */
.role-dialog .el-dialog {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    animation: dialogFloat 3s ease-in-out infinite;
}

.role-dialog .el-dialog:hover {
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    animation-play-state: paused;
}

@keyframes dialogFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* 关闭按钮动画 */
.role-dialog .el-dialog__headerbtn {
    transition: all 0.3s ease;
    border-radius: 50%;
}

.role-dialog .el-dialog__headerbtn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1) rotate(90deg);
}

.role-dialog .el-dialog__close {
    transition: all 0.3s ease;
}

.role-dialog .el-dialog__close:hover {
    transform: scale(1.2);
}

/* 表单标签动画 */
.role-dialog .el-form-item__label {
    transition: all 0.3s ease;
    font-weight: 500;
}

.role-dialog .el-form-item:hover .el-form-item__label {
    color: #f56c6c;
    transform: translateX(2px);
}
</style>